<template>
    <div class="search_navbar">
        <div class="nav">
            <a :class="['nav_item',index == 0 ? 'active' :''] " @click="tabList(0,'','PageAll')" ><span class="txt">全部</span><p class="bar"><span class="line"></span></p></a>
            <a :class="['nav_item',index == 1 ? 'active' :'']"  @click="tabList(1,'ScAlbum','PageAlbum')"   ><span class="txt">专辑</span><p class="bar"><span class="line"></span></p></a>
            <a :class="['nav_item',index == 2 ? 'active' :'']"  @click="tabList(2,'ScSound','PageSound')"  ><span class="txt">声音</span><p class="bar"><span class="line"></span></p></a>
            <a :class="['nav_item',index == 3 ? 'active' :'']"  @click="tabList(3,'ScZhubo','PageZhubo')"  ><span class="txt">主播</span><p class="bar"><span class="line"></span></p></a>
        </div>
        <div class="com">
            <component :is="compName" @zhubo="getCondition"></component>
        </div>
    </div>
</template>

<script>
import ScAlbum from "@/views/search/searchcomp/ScAlbum.vue"
import ScSound from "@/views/search/searchcomp/ScSound.vue"
import ScZhubo from "@/views/search/searchcomp/ScZhubo.vue"
import { mapMutations } from 'vuex'
//  PageAll,
//     PageAlbum,
//     PageSound,
//     PageZhubo
export default {
    data(){
        return{
            index:0,
            compName:"",
            pageComp:"PageAll",
        }
    },
    props:{
        square:{
            type:Number,
            default:0,
        }
    },
    watch:{
        square:{
            immediate:true,
            deep:true,
            handler(val){
                if(val == 1){
                    this.compName = 'ScAlbum'
                }else if(val == 2){
                    this.compName = 'ScSound'
                }else if(val == 0){
                    this.compName = ''
                }else {
                    this.compName = 'ScZhubo'
                }
                this.index = val
            }
        }
    },
    methods:{
        ...mapMutations(['changeCondition']),
    ...mapMutations(['changeFq']),
        tabList(i,compName,page){
            this.index = i
            this.compName = compName
            this.pageComp = page
            this.$emit('my-compName',this.pageComp)
            this.changeCondition("")
            this.changeFq("")
        },

        getCondition(val){
            this.$emit('zhubo',val)
        }
    },
    components:{
        ScAlbum,
        ScSound,
        ScZhubo,
    }
}
</script>

<style lang="scss" scoped>
.search_navbar{
    background-color: #fff;
    .nav{
        height: 35px;
        display: flex;
        border-bottom: 1px solid #e8e8e8;

        a{
            display: block;
            flex: 1;
            font-size: 14px;
            color: #a3a3ac;
            position: relative;
            text-align: center;
            line-height: 35px;
            transition: all .3s ease;
            p{
                display: none;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 3px;
                span{
                    display: block;
                    height: 100%;
                    width: 22px;
                    background-color: #f06742;
                    margin: 0 auto;
                }
            }

        }
        a.active{
            font-size: 18px;
            color: #40404c;
            font-weight: 500;
        }
         a.active p{
             display: block;
         }
    }
}


</style>

